<template>
  <div class="commentManagement">
    <div class="operate-container">
      <div class="leftArea">
        <el-input
          style="width: 210px"
          clearable
          v-model="searchParams.name"
          placeholder="请输入评论名称"
        />
        <el-button
          class="marginLeft14"
          type="primary"
          @click="handleSearch">
          查询
        </el-button>
      </div>
    </div>
    <div class="inner-container">
      <el-table
        stripe
        v-loading="loading"
        :data="tableData"
        :height="'calc(100vh - 245px)'">
        <el-table-column
          fixed
          align="left"
          label="序号"
          width="60">
          <template #default="scope">
            {{ (searchParams.pageNum - 1) * searchParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          width="240"
          align="left"
          label="店铺名称">
          <template #default="scope">
            <span>{{ scope.row.merchant.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          align="left"
          label="口味评价"
          prop="taste">
        </el-table-column>
        <el-table-column
          width="100"
          align="left"
          label="服务评价"
          prop="service">
        </el-table-column>
        <el-table-column
          width="100"
          align="left"
          label="性价比评价"
          prop="costEffectiveness">
        </el-table-column>
        <el-table-column
          width="100"
          align="left"
          label="环境评价"
          prop="environment">
        </el-table-column>
        <el-table-column
          width="400"
          align="left"
          label="评价内容"
          prop="evaluateRemark">
        </el-table-column>
        <el-table-column label="评价图片">
          <template #default="scope">
            <template v-if="scope.row.picFile && scope.row.picFile.length">
              <el-image
                v-for="item in scope.row.picFile"
                :key="item.id"
                :src="item.url"
                :preview-src-list="scope.row.picFile.map(item => item.url)"
                :preview-teleported="true"
                style="width: 48px; height: 48px"
                z-index="100"
                fit="contain">
              </el-image>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          align="left"
          label="评论时间"
          prop="createTime">
        </el-table-column>
        <el-table-column
          width="100"
          align="left"
          label="审批结果"
          prop="state">
          <template #default="scope">
            <el-tag type="info" v-if="scope.row.state === '0'">未审批</el-tag>
            <el-tag type="success" v-if="scope.row.state === '1'">已通过</el-tag>
            <el-tag type="warning" v-if="scope.row.state === '2'">未通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="left"
          label="操作"
          width="220">
          <template #default="scope">
            <el-button size="small" @click="handleApproveComment(scope.row)">
              审核
            </el-button>
            <el-button size="small" type="danger" @click="handleDeleteComment(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[20, 50, 100]"
          :total="searchParams.total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="searchParams.pageNum"
          :page-size="searchParams.pageSize"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { listEvaluate, delEvaluate, approveEvaluate } from "@/api/comment/index.js";
import {handleConfirmDelete} from "@/utils/myUtils.js";
import { ElMessage, ElMessageBox } from 'element-plus'

const searchParams = reactive({
  name: "",
  pageNum: 1,
  pageSize: 20,
  total: 0,
})

//列表数据获取
onMounted(() => { getTableData() })
const tableData = ref([]);
const loading = ref(false)
const getTableData = () => {
  loading.value = true
  listEvaluate(searchParams).then(response => {
    tableData.value = response.rows;
    searchParams.total = response.total;
    loading.value = false;
  })
}

const handleSearch = () => {
  searchParams.pageNum = 1;
  getTableData();
}

const handleCurrentChange = (v) => {
  searchParams.pageNum = v;
  getTableData();
}

const handleSizeChange = (v) => {
  searchParams.pageNum = 1;
  searchParams.pageSize = v;
  getTableData();
}

//审批商家 0-未审批，1-已通过，2-未通过
const handleApproveComment = async (data) => {
  ElMessageBox.confirm(
    '同意发布该评论吗？',
    '审核评论',
    {
      confirmButtonText: '同意',
      cancelButtonText: '拒绝',
      type: 'info',
    }
  )
    .then(() => {
      handleApproveComment_('1', data)
    })
    .catch(() => {
      handleApproveComment_('2', data)
    })
}

//审核走接口
const handleApproveComment_ = (state, data) => {
  const params = {
    id: data.id,
    merchantId: data.merchant.id,
    state,
  }
  approveEvaluate(params).then(response => {
    getTableData();
    ElMessage({
      message: '操作成功',
      type: 'success',
    })
  })
}

//删除商家
const handleDeleteComment = async (data) => {
  await handleConfirmDelete();
  const { id } = data
  delEvaluate(id).then(response => {
    getTableData();
    ElMessage({
      message: '删除成功',
      type: 'success',
    })
  })
}

</script>
<style lang="scss" scoped>
.commentManagement {
  width: 100%;
  padding: 15px;
  >div.operate-container {
    width: 100%;
    height: 60px;
    padding: 0 15px;
    box-sizing: border-box;
    margin-bottom: 15px;
    background-color: #f5f6f8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    >div.leftArea {
      span {
        color: #343d59;
        font-size: 14px;
        &:not(:first-child) {
          margin: 0 14px;
        }
      }
      .el-select {
        width: 200px;
        :deep( .el-input__inner ){
          height: 30px !important;
        }
      }
    }
    >div.rightArea {

    }
  }
  >div.inner-container {
    div.pagination {
      height: 40px;
      line-height: 40px;
      background-color: #ffffff;
      margin-top: 10px;
      .el-pagination {
        float: right;
        margin-right: 30px;
      }
    }
  }
}
</style>
